<template>
  <div class="outer-container">
    <transition name="loading">
      <div class="mask" v-show="appStore.loadingFlag">
        <div class="loader"></div>
        <div :data-content="appStore.loadingContent" class="loader-content"></div>
      </div>
    </transition>
  </div>
</template>
<script setup>
import useAppStore from '@/stores/app';
const appStore = useAppStore();
</script>
<style lang='scss' scoped>
@import '@/assets/styles/mixin.scss';
.outer-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2001;
}
.mask {
  width: 100%;
  height: 100%;
  background-color: var(--color-gray-6);
  @include flex-all-center;
  flex-direction: column;
}
// 加载动画
.loader {
  width: 100px;
  aspect-ratio: 1;
  background: 
    linear-gradient(45deg,#60B99A 50%,#0000 0),
    linear-gradient(45deg,#0000 50%,#60B99A 0),
    linear-gradient(-45deg,#f77825 50%,#0000 0),
    linear-gradient(-45deg,#0000 50%,#f77825 0),
    linear-gradient(#554236 0 0);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  animation: l18 1.5s infinite;
}
@keyframes l18{
  0%   {background-position:50% 50%,50% 50%,50%  50% ,50% 50%,50% 50%}
  25%  {background-position:0  100%,100%  0,50%  50% ,50% 50%,50% 50%}
  50%  {background-position:0  100%,100%  0,100% 100%,0   0  ,50% 50%}
  75%  {background-position:50% 50%,50% 50%,100% 100%,0   0  ,50% 50%}
  100% {background-position:50% 50%,50% 50%,50%  50% ,50% 50%,50% 50%}
}

.loader-content {
  margin-top: 30px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 30px;
  color: var(--color-main);
  animation: l1 1s linear infinite alternate;
}
.loader-content:before {
  content: attr(data-content);
}
@keyframes l1 {to{opacity: 0}}
</style>